响应式 Props 解构

const { foo } = defineProps(['foo'])

watchEffect(() => {
  // 在 3.5 之前仅运行一次
  // 在 3.5+ 版本中会在 "foo" prop 改变时重新运行
  console.log(foo)
})

const props = defineProps(['foo'])

watchEffect(() => {
  // `foo` 由编译器转换为 `props.foo`
  console.log(props.foo)
})

interface Props {
  labels?: string[]
  msg?: string
}

const props = withDefaults(defineProps<Props>(), {
  labels: () => ['one', 'two'], // 注意要使用函数
  msg: 'hello'
})

interface Props {
  labels?: string[]
  msg?: string
}

const { labels = ['one', 'two'], msg = 'hello' } = defineProps<Props>()